﻿<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- saved from url=(0014)about:internet -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>藏边旅行网_CSS专题之OffsetWidth</title>
<script type="text/javascript" src="/html/js/jquery-1.4.2.js"></script>
<style>
	*{margin:0;padding:0;}
	body{
		font-family:"Verdana","宋体";
		font-size:12px;
	}
	.wrap{
		width:1000px;
		height:260px;
		background-color:#f5f5f5;
		border:1px #dcac9a solid;
		padding-left:50px;
		margin-left:50px;
		position:relative;
		margin-top:10px;
		
	}
	.client{
		width:1000px;
		height:200px;
		background-color:#f5f5f5;
		border:1px #dcac9a solid;
		padding-left:50px;
		margin-left:50px;
		position:relative;
		margin-top:10px;
		display:none;
	}
	.box{
		width:200px;
		height:200px;
		background-color:#e0ffff;
		border: 1px #46dca2 solid;
		padding-left:10px;
		overflow:auto;
		margin-left:10px;
		position:relative;
		clear:both;
		
	}
	.readme{
		width:1000px;
		height:20px;
		background-color:#fff;
		border:0px #dcac9a solid;
		margin-left:50px;
		position:relative;
		margin-top:10px;
		display:block;
	}
</style>
<script type="text/javascript" >
	function measure(){
		logger.clear();
		var $box = $(".box");
		var box = $box[0];
		
		//Offset
		var offsetHeight = box.offsetHeight;
		logger.log({'key':'offsetHeight','value':offsetHeight});
		
		var offsetWidth = box.offsetWidth;
		logger.log({'key':'offsetWidth','value':offsetWidth});
		
		var offsetLeft = box.offsetLeft;
		logger.log({'key':'offsetLeft','value':offsetLeft});
		
		var offsetTop = box.offsetTop;
		logger.log({"key":"offsetTop","value":offsetTop});
		
		//Client
		var clientWidth = box.clientWidth;
		logger.log({'key':'clientWidth','value':clientWidth},true);
		
		var clientHeight = box.clientHeight;
		logger.log({'key':'clientHeight','value':clientHeight});
		
		//Scroll
		var scrollWidth = box.scrollWidth;
		logger.log({'key':'scrollWidth','value':scrollWidth},true);
		
		var scrollHeight = box.scrollHeight;
		logger.log({'key':'scrollHeight','value':scrollHeight});
		
		var scrollLeft = box.scrollLeft;
		logger.log({'key':'scrollLeft','value':scrollLeft});
		
		var scrollTop = box.scrollTop;
		logger.log({'key':'scrollTop','value':scrollTop});
		
	}
</script>
</head>
<body>
	<div class="wrap">
		<div class="box">
			<p style="border:1px #dcad87 solid">
				ABCDEFGHIJKLMNOPQRSTABCDEFGHIJKLMNOPQRSU
				ABCDEFGHIJKLMNOPQRYZABCDEFGHIJKLMNOPQRSU
				ABCDEFGHIJKLMNOPQRSD
				ABCDEFGHIJKLMNOPQRST
				ABCDEFGHIJKLMNOPQRSU
				ABCDEFGHIJKLMNOPQRST
				ABCDEFGHIJKLMNOPQRYZ
				ABCDEFGHIJKLMNOPQRSD
				ABCDEFGHIJKLMNOPQRST
				ABCDEFGHIJKLMNOPQRSU
				ABCDEFGHIJKLMNOPQRSU
				ABCDEFGHIJKLMNOPQRSD
				ABCDEFGHIJKLMNOPQRST
				ABCDEFGHIJKLMNOPQRSU
				ABCDEFGHIJKLMNOPQRST
				ABCDEFGHIJKLMNOPQRYZ
				ABCDEFGHIJKLMNOPQRSD
				ABCDEFGHIJKLMNOPQRST
				ABCDEFGHIJKLMNOPQRSU
				ABCDEFGHIJKLMNOPQRSU
			</p>
		</div>
	</div>
	<div class="client">
		<div>
			<label>外围wrap</label>
			<div>
				width:
				<select>
					<option></option>	
				</select>
			</div>
		</div>
	</div>
	<div style="height:70px;">
		<div style="float:left;margin-left:50px;margin-top:5px">
			<input type="button" value="计算" onclick="measure();" style="height: 32px; width: 99px; "/>
		</div>
		<div style="float:left;margin-left:50px;margin-top:5px"><p id="logger"></p></div>
	</div>
	<div class="readme">
		<p>说明：这里没有使用jQuery的定位函数如offset()等，而使用原生的javascript对象的属性或函数。为了更好的观察元素的大小,建议安装Firefox的插件MeasureIt，下载地址：<a href="http://frayd.us/extensions/measureit" target="_blank">http://frayd.us/extensions/measureit</a></p>
	</div>
	
<script type="text/javascript" >
	var logger = new function(){
		this.log = function(obj,isNewLine){
			var oldS = $("#logger").html();
			var s;
			if(typeof isNewLine !='undefined' && isNewLine==true){
				s = oldS + "</br>" + obj['key'] + ":"+obj['value'];
			}else{
				s = oldS + " " + obj['key'] + ":" + obj['value'];
			}
			$("#logger").html(s);
		};
		this.clear = function(){
			$("#logger").html("");
		}
	}();
</script>
<script type="text/javascript">
var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3F981a4babede43d4b65dfce905038f9b5' type='text/javascript'%3E%3C/script%3E"));

</script>
<script>
	$(function(){
		$("a[href*=tongji]").hide();
	});
</script>
</body>
</html>